<template>
  <div id="app">
    <router-view></router-view>
    <!-- 基本布局 -->
    <!-- <el-row :gutter="10">
      <el-col :span="10"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="14"
        ><div class="grid-content bg-purple-light"></div
      ></el-col>
    </el-row> -->
    <!-- 对齐方式 -->
    <!-- <el-row
      type="flex"
      justify="space-between"
      align="middle"
      style="height: 300px; background: red; color: #fff"
    >
      <el-col :span="2">left</el-col>
      <el-col :span="2">right</el-col>

      <div>left</div>
      <div><el-button type="primary" size="default">right</el-button></div>
    </el-row> -->
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
